<template>
  <div>
    <van-nav-bar
      :title="isLogin ? '登录' : '注册'"
      left-text="返回"
      @click-left="handleLeft"
      left-arrow>
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <img class="logo" :src="avatar" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="userInfo.username"
          name="用户名"
          label="用户名"
          label-align="left"
          placeholder="用户名"
          :rules="[
            { required: true, message: '请填写用户名' },
            { validator: validator, message: '请输入正确的用户名' },
          ]" />
        <van-field
          v-model="userInfo.password"
          type="password"
          name="密码"
          label-align="left"
          label="密码"
          placeholder="密码"
          :rules="[
            { required: true, message: '请填写密码' },
            { validator: pwdValidator, message: '密码长度应该在6-8位' },
          ]" />
        <van-field
          center
          label="验证码"
          placeholder="输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
          v-model="userInfo.verify">
          <template #button>
            <VueImageVerify ref="verifyRef" />
          </template>
        </van-field>
      </van-cell-group>
      <div class="tipinfo" @click="isLogin = !isLogin">
        <span>{{ isLogin ? "立即注册" : "已有账号,立即登录" }}</span>
      </div>
      <div style="margin: 16px">
        <van-button round block color="#00A6A5" native-type="submit">
          {{ isLogin ? "登录" : "注册" }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
  import { ref, reactive } from "vue"
  import { useRouter ,useRoute} from "vue-router"
  import getAvatar from "@/utils/avatar"
  import VueImageVerify from "@/components/VueImageVerify.vue"
  import md5 from "js-md5"
  import { login, register } from "@/api/login"
  import { showNotify } from "vant"
  const avatar = getAvatar()
  const isLogin = ref(true)
  const router = useRouter()
  const route = useRoute()
  const verifyRef = ref(null)
  const userInfo = reactive({
    username: "13555555789",
    password: "123456",
    verify: "",
  })
  const validator = val => /^1[345678]\d{9}$/.test(val)
  const pwdValidator = val => /\d{6,}/.test(val)
  const handleLeft = () => {
    router.go(-1)
  }
  let onSubmit = () => {
    // 验证验证码
    if (userInfo.verify.toLowerCase() != verifyRef.value.state.imgCode.toLowerCase()) {
      showNotify({ type: "danger", message: "验证码错误", duration: 1000 })
      return
    }
    if (isLogin.value) {
      login({ loginName: userInfo.username, passwordMd5: md5(userInfo.password) }).then(res => {
        if (res.resultCode === 200) {
          localStorage.setItem("token", res.data)
          showNotify({ type: "success", message: "登录成功", duration: 1000 })
          console.log("route.query.needback:", route.query.needback)
          if (route.query.needback) {
            router.back()
          } else {
            router.replace("/home")
          }
        }
      })
    } else {
      register({ loginName: userInfo.username, password: userInfo.password }).then(res => {
        if (res.code === 200) {
          showNotify({ type: "success", message: "注册成功", duration: 1000 })
          isLogin.value = true
        }
      })
    }
  }
</script>

<style scoped lang="less">
  .logo {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    display: block;
    margin: 50px auto;
  }
  .van-nav-bar__text {
    color: #00a6a4;
  }
  .tipinfo {
    padding: 8px 15px;
    font-size: 14px;
    color: #00a6a4;
  }
</style>
